<template>
  <div class="i18n-test-page">
    <div class="container">
      <h1>{{ $t('test.title') }}</h1>
      
      <div class="test-section">
        <h2>语言切换测试</h2>
        <div class="language-buttons">
          <a-button 
            type="primary" 
            @click="changeLanguage('zh-CN')"
            :disabled="currentLocale === 'zh-CN'"
          >
            切换到中文
          </a-button>
          <a-button 
            type="primary" 
            @click="changeLanguage('en-US')"
            :disabled="currentLocale === 'en-US'"
          >
            Switch to English
          </a-button>
        </div>
        
        <div class="current-language">
          <p><strong>当前语言:</strong> {{ currentLocale === 'zh-CN' ? '中文' : 'English' }}</p>
          <p><strong>Current Locale:</strong> {{ currentLocale }}</p>
        </div>
      </div>
      
      <div class="test-section">
        <h2>翻译内容测试</h2>
        
        <div class="translation-grid">
          <div class="translation-item">
            <h3>导航菜单</h3>
            <ul>
              <li>{{ $t('nav.home') }}</li>
              <li>{{ $t('nav.products') }}</li>
              <li>{{ $t('nav.cart') }}</li>
              <li>{{ $t('nav.profile') }}</li>
              <li>{{ $t('nav.login') }}</li>
              <li>{{ $t('nav.register') }}</li>
            </ul>
          </div>
          
          <div class="translation-item">
            <h3>通用文本</h3>
            <ul>
              <li>{{ $t('common.confirm') }}</li>
              <li>{{ $t('common.cancel') }}</li>
              <li>{{ $t('common.save') }}</li>
              <li>{{ $t('common.delete') }}</li>
              <li>{{ $t('common.search') }}</li>
              <li>{{ $t('common.loading') }}</li>
            </ul>
          </div>
          
          <div class="translation-item">
            <h3>用户相关</h3>
            <ul>
              <li>{{ $t('user.username') }}</li>
              <li>{{ $t('user.email') }}</li>
              <li>{{ $t('user.password') }}</li>
              <li>{{ $t('user.phone') }}</li>
              <li>{{ $t('user.gender') }}</li>
              <li>{{ $t('user.birthday') }}</li>
            </ul>
          </div>
          
          <div class="translation-item">
            <h3>商品相关</h3>
            <ul>
              <li>{{ $t('product.price') }}</li>
              <li>{{ $t('product.stock') }}</li>
              <li>{{ $t('product.addToCart') }}</li>
              <li>{{ $t('product.buyNow') }}</li>
              <li>{{ $t('product.addToFavorites') }}</li>
              <li>{{ $t('product.productDetails') }}</li>
            </ul>
          </div>
          
          <div class="translation-item">
            <h3>购物车</h3>
            <ul>
              <li>{{ $t('cart.title') }}</li>
              <li>{{ $t('cart.empty') }}</li>
              <li>{{ $t('cart.subtotal') }}</li>
              <li>{{ $t('cart.total') }}</li>
              <li>{{ $t('cart.checkout') }}</li>
              <li>{{ $t('cart.continueShopping') }}</li>
            </ul>
          </div>
          
          <div class="translation-item">
            <h3>个人中心</h3>
            <ul>
              <li>{{ $t('profile.title') }}</li>
              <li>{{ $t('profile.personalInfo') }}</li>
              <li>{{ $t('profile.myOrders') }}</li>
              <li>{{ $t('profile.myFavorites') }}</li>
              <li>{{ $t('profile.shippingAddress') }}</li>
              <li>{{ $t('profile.accountSecurity') }}</li>
            </ul>
          </div>
        </div>
      </div>
      
      <div class="test-section">
        <h2>动态内容测试</h2>
        <div class="dynamic-content">
          <p>{{ $t('home.title') }}</p>
          <p>{{ $t('home.subtitle') }}</p>
          <p>{{ $t('home.featuredProducts') }}</p>
          <p>{{ $t('home.newArrivals') }}</p>
          <p>{{ $t('home.specialOffers') }}</p>
        </div>
      </div>
      
      <div class="test-section">
        <h2>复数形式测试</h2>
        <div class="plural-test">
          <p>{{ $tc('cart.items', 0) }}</p>
          <p>{{ $tc('cart.items', 1) }}</p>
          <p>{{ $tc('cart.items', 5) }}</p>
        </div>
      </div>
      
      <div class="test-section">
        <h2>格式化测试</h2>
        <div class="format-test">
          <p>价格: {{ $n(1234.56, 'currency') }}</p>
          <p>日期: {{ $d(new Date(), 'long') }}</p>
          <p>数字: {{ $n(1234567, 'decimal') }}</p>
        </div>
      </div>
      
      <div class="test-section">
        <h2>测试说明</h2>
        <div class="test-instructions">
          <h3>功能说明</h3>
          <ul>
            <li>点击语言切换按钮可以实时切换中英文</li>
            <li>语言设置会保存到 localStorage</li>
            <li>页面刷新后会保持选择的语言</li>
            <li>支持浏览器语言自动检测</li>
            <li>所有文本都通过 $t() 函数进行国际化</li>
          </ul>
          
          <h3>使用方法</h3>
          <ol>
            <li>在组件中使用 $t('key') 获取翻译文本</li>
            <li>在 script 中使用 useI18n() 获取 i18n 实例</li>
            <li>使用 locale.value 切换语言</li>
            <li>语言包按功能模块组织，便于维护</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { locale, t } = useI18n()

// 当前语言
const currentLocale = computed(() => locale.value)

// 切换语言
const changeLanguage = (lang) => {
  locale.value = lang
  localStorage.setItem('locale', lang)
}
</script>

<style scoped>
.i18n-test-page {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.test-section {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}

.test-section h2 {
  color: #333;
  margin-bottom: 20px;
}

.language-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.current-language {
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.current-language p {
  margin: 5px 0;
  color: #666;
}

.translation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.translation-item {
  padding: 15px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}

.translation-item h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
}

.translation-item ul {
  margin: 0;
  padding-left: 20px;
}

.translation-item li {
  margin: 5px 0;
  color: #666;
}

.dynamic-content p {
  margin: 10px 0;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  color: #333;
}

.plural-test p,
.format-test p {
  margin: 10px 0;
  padding: 10px;
  background-color: #e6f7ff;
  border-radius: 4px;
  color: #333;
}

.test-instructions h3 {
  color: #333;
  margin: 20px 0 10px 0;
}

.test-instructions ul,
.test-instructions ol {
  margin: 10px 0;
  padding-left: 20px;
}

.test-instructions li {
  margin: 5px 0;
  color: #666;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    padding: 20px;
  }
  
  .translation-grid {
    grid-template-columns: 1fr;
  }
  
  .language-buttons {
    flex-direction: column;
  }
}
</style> 